// import auth from "@/services/api/login";
// import { delToken } from "@/utils/auth";
import {
	CheckOutlined,
	GlobalOutlined,
	InfoCircleOutlined,
	LogoutOutlined,
	RightOutlined,
	SettingOutlined,
	SkinOutlined,
	SyncOutlined,
	UserOutlined,
	UserSwitchOutlined
} from "@ant-design/icons";
import { useEmotionCss } from "@ant-design/use-emotion-css";
// import { history, useModel } from "@umijs/max";
import { Avatar, Button, Card, Divider, Flex, theme, Menu, Popover, Skeleton, Space, Spin, Typography, message } from "antd";
import type { MenuInfo } from "rc-menu/lib/interface";
import React, { useCallback, useState } from "react";
import HeaderDropdown from "../HeaderDropdown";
const { useToken } = theme;
import useAuthToken from "@/hooks/useToken";
// import SystemInfoModal from "../SystemInfoModal";
import styles from "./index.module.less";
import useFetchUserInfo from "@/hooks/useFetchUserInfo";
import { useNavigate } from "react-router-dom";
const { Title, Text } = Typography;
import TenantModal from "../TenantModal";
export type GlobalHeaderRightProps = {
	menu?: boolean;
	children?: React.ReactNode;
};
export const AvatarName = () => {
	// const { initialState } = useModel("@@initialState");
	const currentUser = {};
	return <span className="anticon">Herther</span>;
};
import AvatarBg from "@/assets/avatar.png";
import IconFont from "../IconFont";
import { RootState, useDispatch, useSelector } from "@/store";
import { clearUserInfo, setDark } from "@/store/modules/global";
import { log } from "@antv/g2plot/lib/utils";
import { logOut } from "@/services/api/Login";
import { useWebSocketContext } from "../WebSocketProvide";
// import UseWebSocket from "@/hooks/useWebSocket";

export const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu, children }) => {
	const { close } = useWebSocketContext();
	const [infoOpen, setInfoOpen] = useState<boolean>(false);
	const [tenantSwitchOpen, setTenantSwitchOpen] = useState<boolean>(false);
	const navigator = useNavigate();
	const dispatch = useDispatch();
	const { themeConfig } = useSelector((state: RootState) => state.global);
	// const { close } = UseWebSocket();
	const actionClassName = useEmotionCss(({ token }) => {
		return {
			display: "flex",
			height: "48px",
			marginLeft: "auto",
			overflow: "hidden",
			alignItems: "center",
			padding: "0 8px",
			cursor: "pointer",
			borderRadius: token.borderRadius,
			"&:hover": {
				backgroundColor: token.colorBgTextHover
			}
		};
	});

	const avatarContainer = useEmotionCss(({ token }) => {
		return {
			position: "relative",
			top: "30px",
			display: "flex",
			alignItems: "center",
			justifyContent: "center",
			width: "80px",
			height: "80px",
			background: token.colorBgBase,
			borderRadius: "50%"
		};
	});
	const contentContainer = useEmotionCss(({ token }) => {
		return {
			width: "200",
			minHeight: "100px",
			marginTop: "30px",
			background: token?.Layout?.headerBg
		};
	});
	const top = useEmotionCss(({ token }) => {
		return {
			display: "flex",
			alignItems: "center",
			justifyContent: "center",
			height: "80px",
			background: token.colorPrimary
		};
	});

	const onMenuClick = useCallback((event: MenuInfo) => {
		const { key } = event;
		// console.log(key);
		if (key === "logout") {
			// flushSync(() => {
			//   setInitialState((s) => ({ ...s, currentUser: undefined }));
			// });
			// loginOut();
			return;
		} else if (key === "system") {
			setInfoOpen(true);
			return;
		} else if (key === "userCenter") {
			navigator("/userCenter");
		} else if (key === "light") {
			dispatch(setDark(false));
			return;
		} else if (key === "dark") {
			dispatch(setDark(true));
			return;
		}
	}, []);

	const loading = (
		<span className={actionClassName}>
			<Spin
				size="small"
				style={{
					marginLeft: 8,
					marginRight: 8
				}}
			/>
		</span>
	);

	const menuItems = [
		{
			key: "tenantSwitch",
			icon: <UserSwitchOutlined />,
			label: (
				<Flex
					justify="space-between"
					align="center"
					style={{ height: 25 }}
					onClick={() => {
						console.log("aa");

						setTenantSwitchOpen(true);
					}}
				>
					<Text style={{ marginBottom: 0 }}>租户切换</Text>
					<Text style={{ marginBottom: 0 }}>默认租户</Text>
				</Flex>
			)
		},

		{
			key: "lang",
			icon: <GlobalOutlined />,
			label: "语言切换",
			children: [
				{
					key: "zh",
					label: (
						<Space>
							中文(简体)
							<CheckOutlined />
						</Space>
					)
				},
				{
					key: "en",
					label: (
						<Space>
							英文(English)
							{/* <CheckOutlined /> */}
						</Space>
					)
				}
			]
		},
		{
			key: "themes",
			icon: <SkinOutlined />,
			label: "主题切换",
			children: [
				{
					key: "dark",
					label: (
						<Space>
							暗色模式
							{themeConfig?.isDark && <CheckOutlined />}
						</Space>
					)
				},
				{
					key: "light",
					label: (
						<Space>
							亮色模式
							{!themeConfig?.isDark && <CheckOutlined />}
						</Space>
					)
				}
			]
		},
		{
			key: "userCenter",
			icon: <SettingOutlined />,
			label: "个人中心"
		}

		// {
		// 	type: "divider" as const
		// },
		// {
		// 	key: "logout",
		// 	icon: <LogoutOutlined />,
		// 	label: "退出登录"
		// }
		// {
		// 	key: "lang",
		// 	icon: <UserOutlined />,
		// 	label: (
		// 		<Flex justify="space-between" align="center" style={{ height: 25 }}>
		// 			<Text>系统信息</Text>
		// 		</Flex>
		// 	)
		// }
	];
	const { token } = useToken();
	const { clearToken } = useAuthToken();
	const { userInfo, isLoading } = useFetchUserInfo();
	const handleProduct = () => {
		console.log("about");
	};
	const handleLogout = () => {
		close();
		logOut()
			.then(res => {
				message.success(res?.msg);
				navigator("/");
				clearToken();
				dispatch(clearUserInfo());
			})
			.catch(err => {});
	};
	return (
		<>
			<HeaderDropdown
				dropdownRender={() => {
					return (
						<Card
							title={
								<>
									{isLoading ? (
										<Space size={5} style={{ padding: "10px" }}>
											<Skeleton.Avatar size="large" active shape="circle" />
											<Skeleton.Input active />
										</Space>
									) : (
										<div
											style={{
												borderRadius: "6px 6px 0px 0px",
												padding: "20px 16px 16px",
												background: `linear-gradient(-40deg,hsla(0,0%,100%,.52) 4%,hsla(0,0%,100%,0)),url(${AvatarBg})`,
												backgroundColor: "#3787ff"
											}}
										>
											<Space size={15} style={{}}>
												<Avatar size={45} src={userInfo?.user?.avatar} style={{ border: "2px solid white" }} />
												<Space direction="vertical" align="start" size={0}>
													<Text style={{ marginBottom: "0px", fontSize: 16 }}>{userInfo?.user?.realName}</Text>
													<Text type="secondary" style={{ fontSize: 14, fontWeight: "400" }}>
														{userInfo?.user?.dept?.deptName}
													</Text>
												</Space>
											</Space>
											<div style={{ marginTop: 18 }}>
												<Text type="secondary" style={{ marginBottom: "0px", fontSize: 12, fontWeight: "500" }}>
													{userInfo?.user?.signature}
												</Text>
											</div>
										</div>
									)}
								</>
							}
							styles={{
								header: {
									borderRadius: 6,
									padding: 0
								},
								body: {
									borderRadius: 6,
									// background: "#fff",
									boxShadow: "rgba(0, 0, 0, 0.1) 0px 12px 24px 0px",
									padding: "0px"
								}
							}}
							bordered={false}
						>
							{/* style={{ height: 250, padding: "15 20 10 20" }} */}
							<div
								style={{
									height: 180,
									display: "flex",
									flexDirection: "column",
									justifyContent: "space-between"
									// background: token.colorBgContainer background: token.colorBgContainer
								}}
							>
								<Menu
									style={{ width: "100%", boxShadow: "none", borderRadius: 0, background: token.colorBgContainer }}
									onClick={onMenuClick}
									items={menuItems}
								/>
								<Space
									size={0.1}
									direction="horizontal"
									style={{ width: "100%", marginBottom: 10, justifyContent: "center" }}
									split={<Divider type="vertical" />}
									align="center"
								>
									<Button type="text" onClick={handleProduct}>
										关于产品
									</Button>
									<Button type="text" onClick={handleLogout}>
										退出登录
									</Button>
								</Space>
							</div>
							{/* <div>
								<Menu style={{ width: "100%", boxShadow: "none" }} theme="light" onClick={onMenuClick} items={menuItems} />
							</div> */}
						</Card>
					);
				}}
			>
				{children}
			</HeaderDropdown>
			<TenantModal
				open={tenantSwitchOpen}
				onClose={() => {
					setTenantSwitchOpen(false);
				}}
			/>
			{/* <SystemIn
				foModal open={infoOpen} onCancel={() => setInfoOpen(false)} /> */}
		</>
	);
};
